<template>
  <div>
   <div class="stepRecord">
   <div class="pad">
      <i class="icon-round"></i>
    <div class="time">
     <span>今天</span>
     <van-button round color="#44a5fe"  class="clearbtn" >清除</van-button>
    </div>
    <div class="list">

     <div class="list-item" >
     <div class="box">Mysql基础课程
     <div class="box1">2.2流程控制——while循环</div>
     </div>
     
     </div>
     <div class="list-item" >
     <div class="box">ui设计需要学习什么
     <div class="box1">发刊词：一套专门为0~3岁的宝宝定制的早教课程，宝爸宝妈必修课</div>
     </div>

     </div>
    </div>
   </div>


   </div>


  </div>
</template>

<script>
import { myStudy } from '@/api'
export default {
  data() {
    return {
      list1: '',
    }
  },
  created() {
    this.getList1()
  },
  methods: {
    async getList1() {
      try {
        const { data: res } = await myStudy({ uid: this.$store.state.uid })
        console.log(res, '模板')
        this.list1=res
      } catch (err) {
        console.log(err)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.stepRecord{
  margin-left:23px ;
  margin-top: 10px;
  border-left: 1px solid #e5e5e5;
  position: relative;
  .pad{
    margin-left: 20px;
    border-bottom: 1px solid #e5e5e5;
      margin-right: 10px;
  }
}
.icon-round{
  top:20px;
  left: -6px;
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
   border: 1px solid #ccc;
   background-color: red;
}
.list-item{
  margin-bottom: 30px;
} 
.time {
  display: flex;
  justify-content: space-between;
  span{
  color: #7f8085;
}
}
/deep/.clearbtn{
  width: 90px;
  height: 32px;
  border: 1px solid #44a5fe;
 
}

</style>
